<template>
	<view class="pageContainer myBackground boxSizing" :style="{height: `${windowHeight}px`}">
		<view class="header d-flex a-center j-sb pl15 pr15">
			<view class="d-flex a-center">
				<view class="d-flex a-center">
					<image style="width: 96rpx; height: 96rpx;" mode="aspectFill" src="/static/img/home/logo.png"></image>
				</view>
				<view class="loginName ml10">{{userInfo.userName}}</view>
			</view>
			<view class="d-flex a-center logout"  @click="logout">
				<view>
					<u--image src="/static/img/home/switch.png" width="32rpx" height="32rpx"></u--image>
				</view>
				<view class="ml5">退出登录</view>
			</view>
		</view>

		<view class="home_body pl15 pr15 pt20 boxSizing">
			<view class="w100p h100p d-flex flex-column j-sb">
				<view>
					<view class="d-flex a-center j-sb pt15 pb15 border_bottom" @click="openPopup()">
						<view class="d-flex-center">
							<view class="d-flex-center mr10">
								<image style="width: 32px; height: 32px;" mode="aspectFill" :src="reset"></image>
							</view>
							<view class="itemTitle">重置密码</view>
						</view>
						<view class="d-flex-center">
							<u-icon name="arrow-right" color="#c7c7cc" size="20"></u-icon>
						</view>
					</view>
					<view class="d-flex a-center j-sb pt15 pb15 border_bottom" @click="goPageUserManual('0', fileUrl1)">
						<view class="d-flex-center">
							<view class="d-flex-center mr10">
								<image style="width: 32px; height: 32px;" mode="aspectFill" :src="appSc"></image>
							</view>
							<view class="itemTitle">APP使用手册</view>
						</view>
						<view class="d-flex-center">
							<u-icon name="arrow-right" color="#c7c7cc" size="20"></u-icon>
						</view>
					</view>
					<view class="d-flex a-center j-sb pt15 pb15 border_bottom" @click="goPageAbout()">
						<view class="d-flex-center">
							<view class="d-flex-center mr10">
								<image style="width: 32px; height: 32px;" mode="aspectFill" :src="version"></image>
							</view>
							<view class="itemTitle">关于我们</view>
						</view>
						<view class="d-flex-center">
							<u-icon name="arrow-right" color="#c7c7cc" size="20"></u-icon>
						</view>
					</view>
				</view>

				<view class="d-flex a-center position-relative" style="height: 180rpx;">
					<view class="d-flex a-center hotPhone w100p fs16 pl20">
						<view class="hotTitle">售后热线：</view>
						<view class="hotValue">400-058-1988</view>
					</view>
					<view class="d-flex-center position-absolute" style="right: 40rpx;bottom: 60rpx;">
						<image style="width: 60px; height: 60px;" mode="aspectFill" :src="hotPhone"></image>
					</view>
				</view>
			</view>
		</view>

		<u-popup :customStyle="{width: '680rpx'}" :show="popupShow" mode="center" :round="10" @close="popupShow = false">
			<view class="p15">
				<view class="">
					<view class="d-flex-center fs16 fw600">重置密码</view>
					<view class="mt20">
						<view class="mb20">
							<view class="d-flex-center">
								<view class="inputTitle">原密码：</view>
								<view class="flex-1">
									<u--input placeholder="请输入原密码" type="number" password border="surround"
										v-model.trim="userFormData.oldPwd"></u--input>
								</view>
							</view>
							<view class="d-flex-center mt10 mb10">
								<view class="inputTitle">新密码：</view>
								<view class="flex-1">
									<u--input placeholder="请输入新密码" type="number" password border="surround"
										v-model.trim="userFormData.newPwd"></u--input>
								</view>
							</view>
							<view class="d-flex-center">
								<view class="inputTitle">确认密码：</view>
								<view class="flex-1">
									<u--input placeholder="请输入新密码" type="number" password border="surround"
										v-model.trim="userFormData.confirmPwd"></u--input>
								</view>
							</view>
						</view>
						<view class="d-flex a-center j-sa">
							<view class="w40p">
								<u-button text="取消" @click="popupShow = false"></u-button>
							</view>
							<view class="w40p">
								<u-button :loading="addOrUpdateLoading" type="primary" text="确定" @click="allSaveControl()"></u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<tab-bar-view :tabCode="'2'"></tab-bar-view>
	</view>
</template>

<script>
	import {
		updatePwdByApp,
		queryFileListByApp
	} from '@/api/index'

	export default {
		data() {
			return {
				userInfo: {},
				version: require('static/img/home/version.png'),
				appSc: require('static/img/home/appSc.png'),
				reset: require('static/img/home/reset.png'),
				hotPhone: require('static/img/home/hotPhone.png'),
				fileUrl1: "",
				fileUrl2: "",
				popupShow: false,
				addOrUpdateLoading: false,
				userFormData: {
					oldPwd: "",
					newPwd: "",
					confirmPwd: "",
				}
			}
		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.queryFileListByApp()
		},
		onShow() {
			// this.userInfo = uni.getStorageSync('userInfo')
		},
		onReady() {
			// 隐藏导航栏
			uni.hideTabBar({});
		},
		methods: {
			async queryFileListByApp(data) {
				await queryFileListByApp().then(res => {
					let tempData = res.object
					this.fileUrl1 = tempData[0].fileUrl
					this.fileUrl2 = tempData[1].fileUrl
				})
			},
			goPageUserManual(type, data) {
				uni.navigateTo({
					url: "/pages/my/userManual/userManual?type=" + type + '&data=' + data
				});
			},
			
			goPageAbout() {
				uni.navigateTo({
					url: "/pages/my/about/about"
				});
			},

			// 打开弹出层
			openPopup(val) {
				this.userFormData.oldPwd = ""
				this.userFormData.newPwd = ""
				this.userFormData.confirmPwd = ""

				this.addOrUpdateLoading = false
				this.popupShow = true
			},

			// 修改密码或者签名
			allSaveControl() {
				if (!this.userFormData.oldPwd) {
					uni.showToast({
						duration: 1000,
						icon: "error",
						title: '请输入原密码'
					})
					return
				}

				if (!this.userFormData.newPwd) {
					uni.showToast({
						duration: 1000,
						icon: "error",
						title: '请输入新密码'
					})
					return
				}

				if (!this.userFormData.confirmPwd) {
					uni.showToast({
						duration: 1000,
						icon: "error",
						title: '请输入确认密码'
					})
					return
				}

				this.addOrUpdateLoading = true
				updatePwdByApp({
					oldPwd: this.userFormData.oldPwd,
					newPwd: this.userFormData.newPwd,
					confirmPwd: this.userFormData.confirmPwd,
					userCode: this.userInfo.userCode
				}).then(res => {
					if (res.status == '200') {
						uni.showToast({
							duration: 1000,
							icon: "success",
							title: res.message
						})
						this.addOrUpdateLoading = false
						this.popupShow = false
					} else {
						this.addOrUpdateLoading = false
					}
				})
				this.addOrUpdateLoading = false
			},

			logout() {
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('featureCenterData')
				uni.removeStorageSync('logoutTime')
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},

			uploadImg() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.uploadFile({
							url: that.$upLoad + "/uploadManager/upload",
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let imgData = JSON.parse(uploadFileRes.data);
								console.log(imgData);

								let options = {
									userCode: uni.getStorageSync('carUserInfo').userCode,
									autograph: imgData.object.url
								}
								subMyInfo(options).then(val => {
									console.log(val)
									uni.setStorageSync('carUserInfo', val.object)
									that.user = uni.getStorageSync('carUserInfo')
									uni.showToast({
										title: '提交成功',
										icon: 'succes',
										duration: 1000
									})

								})
								setTimeout(() => {
									that.$refs.sign.close()
								}, 2000)
								console.log(imgData.object.url);
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageContainer {
		padding-top: calc(var(--status-bar-height) + 30rpx);
		box-sizing: border-box;
		font-family: Source Han Sans CN, Source Han Sans CN-500;

		.header {
			height: 180rpx;

			.loginName {
				color: #ffffff;
				font-size: 32rpx;
			}

			.logout {
				background: #ffffff;
				border-radius: 68rpx;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.10);
				color: #999999;
				font-size: 24rpx;
				padding: 10rpx 18rpx;
			}
		}

		.home_body {
			display: flex;
			flex-direction: column;
			height: calc(100% - 300rpx);
			background: #ffffff;
			border-radius: 16px 16px 0px 0px;

			.border_bottom {
				border-bottom: 0.5px solid #dddddd;
			}

			.itemTitle {
				font-family: Source Han Sans CN, Source Han Sans CN-400;
				font-size: 32upx;
				color: #333333;
				font-weight: 400;
			}

			.itemValue {
				font-family: Source Han Sans CN, Source Han Sans CN-400;
				font-size: 32upx;
				color: #929292;
				font-weight: 400;
			}
		}

		.inputTitle {
			width: 150rpx;
			color: #333333;
			font-size: 28rpx;
			text-align: right;
		}

		.hotPhone {
			height: 80rpx;
			background: linear-gradient(90deg, #e8eeff, #86aeff 100%);
			border-radius: 46px;
		}

		.hotTitle {
			font-family: Source Han Sans CN, Source Han Sans CN-600;
			font-weight: 600;
			color: #333333;
		}

		.hotValue {
			font-family: DIN, DIN-600;
			font-weight: 600;
			color: #333333;
		}
	}
</style>